<template>
  <el-card>
    <el-form :model="promotionAdDTO" label-width="80px">
      <el-form-item label="广告名称">
        <el-input v-model="promotionAdDTO.name"></el-input>
      </el-form-item>
      <el-form-item label="广告位置">
        <el-select v-model="promotionAdDTO.spaceId" placeholder="请选择活动区域">
          <el-option
          v-for="item in advertSpaces"
          :key="item.id"
          :label="item.name"
          :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker type="date" placeholder="选择日期" v-model="promotionAdDTO.startTime" style="width: 30%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="到期时间">
        <el-date-picker type="date" placeholder="选择日期" v-model="promotionAdDTO.endTime" style="width: 30%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="上线/下线">
        <el-radio-group v-model="promotionAdDTO.status">
          <el-radio label="下线" :value="1"></el-radio>
          <el-radio label="上线" :value="0"></el-radio>
        </el-radio-group>
      </el-form-item>
      <course-image
        v-model="promotionAdDTO.img"
        label="广告图片"></course-image>
      <el-form-item label="广告链接">
        <el-input v-model="promotionAdDTO.link"></el-input>
      </el-form-item>
      <el-form-item label="广告备注">
        <el-input type="textarea" v-model="promotionAdDTO.htmlContent"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import CourseImage from '../course/components/CourseImage'
import { getAddOrEditAdvert } from '@/services/advert'
import { getAllAdvertSpace } from '@/services/advert-space'

export default {
  data () {
    return {
      promotionAdDTO: {},
      advertSpaces: []
    }
  },
  components: {
    CourseImage
  },
  methods: {
    async onSubmit () {
      const { data } = await getAddOrEditAdvert(this.promotionAdDTO)
      console.log(data)
    },
    // 获取所有广告位
    async getAdvertSpaces () {
      const { data } = await getAllAdvertSpace()
      if (data.state === 1) {
        this.advertSpaces = data.content
      }
    }
  },
  created () {
    this.getAdvertSpaces()
  }
}
</script>

<style lang='scss' scoped></style>
